/* components */
import { BaseSelectUserInfiniteScrollUser, BaseSelectUserUserItems, BaseSelectUserNoDataView } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { 
  BaseSelectUserComponentNameEnum, 
  BaseSelectUserFetchDebounceTime, 
  SelectUserComponentServiceProvider 
} from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { 
  useBaseSelectUserServiceProviderUserListParams, 
  useFetchServiceProviderList, 
  useFetchServiceProviderQualificationList, 
  useFetchServiceProviderTypeList, 
  useFetchServiceProviderUserList, 
  useSelectUserServiceProviderUserList 
} from '@src/component/common/BaseSelectUser/hooks'
import { useBaseSelectUserStoreLoadingMap, useBaseSelectUserStoreServiceProviderList, useBaseSelectUserStoreUserListMap } from '@src/component/common/BaseSelectUser/store'
/* scss */
import '@src/component/common/BaseSelectUser/components/ServiceProvider/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* util */
import { debounce } from 'lodash'
import { isFalse } from '@src/util/type'

export type ServiceProviderProps = {
  isMulti: boolean;
  value: SelectUserComponentServiceProvider[];
}

export interface ServiceProviderSetupState {
  
}

export enum ServiceProviderEmitEventNameEnum {
  Input = 'input',
  Click = 'click',
}

export type ServiceProviderInstance = ComponentInstance & ServiceProviderSetupState
export type ServiceProviderVM = ComponentRenderProxy<ServiceProviderProps> & CommonComponentInstance & ServiceProviderInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserServiceProviderRight,
  emits: [
    ServiceProviderEmitEventNameEnum.Input,
    ServiceProviderEmitEventNameEnum.Click
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    value: {
      type: Array as PropType<SelectUserComponentServiceProvider[]>,
      default: () => []
    }
  },
  setup(props: ServiceProviderProps, { emit }) {
    
    const { addPageNum } = useBaseSelectUserServiceProviderUserListParams()
    const { isLoadmoreDisabled, isLoadmoreNotDisabled } = useSelectUserServiceProviderUserList()
    const { serviceProviderUserList, isServiceProviderUserListEmpty } = useBaseSelectUserStoreUserListMap()
    const { serviceProviderLoading, setServiceProviderUserLoading, tabLoading, serviceProviderUserLoading, clearServiceProviderUserLoading } = useBaseSelectUserStoreLoadingMap()
    
    // 获取服务商人员列表
    const fetchServiceProviderUserList = useFetchServiceProviderUserList()
    
    /** 
     * @description 是否显示服务商人员列表无数据页面
     * 1. 服务商人员列表为空
     * 2. 且 不在加载状态
    */
    const isShowServiceProviderUserListNotDataView = computed(() => {
      return isServiceProviderUserListEmpty.value && isFalse(serviceProviderUserLoading.value) && isFalse(serviceProviderLoading.value)
    })
    
    /** 
     * @description 是否不显示服务商人员列表无数据页面
    */
    const isNotShowServiceProviderUserListNotDataView = computed(() => {
      return isFalse(isShowServiceProviderUserListNotDataView.value)
    })
    
    const loadmoreHandler = () => {
      addPageNum()
      fetchServiceProviderUserList().finally(clearServiceProviderUserLoading)
    }
    
    const loadmoreDebounceHandler = debounce(loadmoreHandler, BaseSelectUserFetchDebounceTime)
    
    const loadmoreDebounceImplHandler = () => {
      
      if (isLoadmoreNotDisabled.value) {
        setServiceProviderUserLoading()
      }
      
      loadmoreDebounceHandler()
    }
    
    return {
      serviceProviderUserList,
      
      serviceProviderLoading,
      serviceProviderUserLoading,
      tabLoading,
      
      isLoadmoreDisabled,
      isShowServiceProviderUserListNotDataView,
      isNotShowServiceProviderUserListNotDataView,
      
      loadmoreDebounceImplHandler
    }
    
  },
  methods: {
    /** 
    * @description 获取属性列表
    */
    getAttributes() {
      return {
        directives: [
          {
            name: 'loading',
            value: (this.serviceProviderLoading || this.serviceProviderUserLoading) && isFalse(this.tabLoading)
          }
        ]
      }
    }
  },
  render(h: CreateElement) {
    
    const attrs = this.getAttributes()
    
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserServiceProviderRight} {...attrs}>
        <div 
          class="base-select-user-height-100-percent"
        >
          
          {/* start 无限滚动人员 */}
          <BaseSelectUserInfiniteScrollUser
            disabled={this.isLoadmoreDisabled}
            loadmore={this.loadmoreDebounceImplHandler}
          >
            {/* start 人员列表 */}
            <BaseSelectUserUserItems
              value={this.serviceProviderUserList} 
              is-multi={this.isMulti}
            />
            {/* end 人员列表 */}
          </BaseSelectUserInfiniteScrollUser>
          {/* end 无限滚动人员 */}
          
        </div>
        
        {/* start 无数据显示 */}
        <BaseSelectUserNoDataView v-show={this.isShowServiceProviderUserListNotDataView} />
        {/* end 无数据显示 */}
        
      </div>
    )
  }
})
